<template>
  <div>

    <el-dialog :visible.sync="visible"
               :title="deviceManage.name"
               width="30%"
               :before-close="modalClose"
               center
               :close-on-click-modal="false"
               :close-on-press-escape="false">
      <el-row>
        <el-col :span="21">
          <el-radio-group v-model="type"
                          @change="changeRadio">
            <el-radio-button v-for="item in listData"
                             :label="item.value"
                             :key="item.value">{{item.label}}
            </el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="3">
          <el-button type="primary"
                     @click="op('', 'add', '')">新 增</el-button>
        </el-col>
      </el-row>
      <element-table :columns="columns1"
                     height="540"
                     class="mt-20"
                     :data="tableData"
                     v-loading="loading1"
                     pager
                     :pageTotal="pageTotal1"
                     :pageIndex="pageIndex"
                     :pageSize="pageSize"
                     @handleChangePage="handleChangePage"
                     v-if="currentIndex=== 4">
        <template v-slot:edit="{row}">
          <el-button type="danger"
                     @click="op(row, 'del', type)">删 除</el-button>
        </template>
      </element-table>
      <element-table :columns="columns2"
                     height="540"
                     class="mt-20"
                     :data="tableList"
                     v-loading="loading2"
                     pager
                     :pageTotal="pageTotal2"
                     :pageIndex="pageIndex"
                     :pageSize="pageSize"
                     @handleChangePage="handleChangePage"
                     v-if="currentIndex=== 3">
        <template v-slot:edit="{row}">
          <el-button type="danger"
                     @click="op(row, 'del', type)">删 除</el-button>
        </template>
      </element-table>
      <el-dialog width="35%"
                 title="新增"
                 :visible.sync="innerVisible"
                 append-to-body>
        <el-form :model="addForm"
                 :rules="addRules"
                 ref="addRef"
                 label-width="100px">
          <el-form-item label="设备名称"
                        prop="goodsTypeId">
            <el-select v-model="addForm.goodsTypeId"
                       placeholder="请选择设备名称"
                       @change="changeDevice">
              <el-option v-for="item in deviceList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="设备序列号"
                        prop="sn">
            <el-input v-model="addForm.sn"
                      class="w-200"
                      placeholder="请输入设备序列号"></el-input>
          </el-form-item>

        </el-form>
        <div class="add-btn">
          <el-button type="primary"
                     @click="saveBtn(type)">确 定</el-button>
          <el-button @click="innerVisible = false">取 消</el-button>

        </div>
      </el-dialog>

    </el-dialog>
  </div>
</template>
<script>
  import elementTable from '@/base/ElementTable'
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      deviceManage: {
        type: Object,
        default: false
      }
    },
    data () {
      return {
        loading1: false,
        loading2: false,
        innerVisible: false,
        columns1: [
          {
            label: '设备名称',
            prop: 'name'
          },
          {
            label: '设备SN码',
            prop: 'code'
          },
          {
            label: '操作',
            prop: 'edit',
            isSlot: true,
            align: 'center',
            width: 100
          }
        ],
        columns2: [
          {
            label: '设备名称',
            prop: 'name'
          },
          {
            label: '设备序列号',
            prop: 'code'
          },
          {
            label: '操作',
            prop: 'edit',
            isSlot: true,
            align: 'center',
            width: 100
          }
        ],
        tableData: [],
        pageTotal1: 0,
        pageTotal2: 0,
        pageIndex: 1,
        pageSize: 10,
        addRules: {
          goodsTypeId: [
            { required: true, message: '请选择设备名称', trigger: 'change' },
          ],
          sn: [
            { required: true, message: '请输入设备序列号', trigger: 'blur' },
          ]
        },
        addForm: {
          goodsTypeId: '',
          name: '',
          companyId: this.deviceManage.id,
          sn: '',
        },
        type: 4,
        currentIndex: 4,
        listData: [
          { label: '力康设备', value: 4 },
          { label: '动态心电设备', value: 3 }
        ],
        tableList: [],
        deviceList: [],
        deviceFilterList: [],
      }
    },
    methods: {
      modalClose () {
        this.$emit('update:visible', false); // 直接修改父组件的属性 
      },
      // 保存
      saveBtn (type) {
        this.$refs.addRef.validate(async (valid) => {
          if (valid) {
            const { data: res } = await this.post(this.api.ECG.addCompanyBind, {
              type: type,
              ...this.addForm
            })
            if (res.code === '200') {
              this.$message.success('新增成功!');
              this.innerVisible = false;
              this.getList();
            }
          }
        })
      },
      // 新增、删除
      op (row, option, type) {
        switch (option) {
          case 'add':
            this.innerVisible = true;
            if (this.$refs.addRef) {
              this.$refs.addRef.resetFields();
            }
            this.getEcgList();
            break
          case 'del':
            this.$confirm('确认删除？')
              .then(_ => {
                this.post(this.api.ECG.delCompanyBind, {
                  companyId: this.deviceManage.id,
                  sn: row.code,
                  type: type
                }).then(({ data }) => {
                  if (data.code === '200') {
                    this.$message.success(`${type === 4 ? '力康心电设备' : '动态心电设备'}删除成功!`)
                    this.getList();
                  }
                })
              })
              .catch(_ => { });
            break
        }
      },
      // 列表
      async getList () {
        const { data: res } = await this.post(this.api.ECG.queryDeviceList, {
          type: this.type,
          companyId: this.deviceManage.id,
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize
        })
        this.loading1 = true;
        this.loading2 = true;
        if (res.code === '200') {
          if (this.type === 4) {
            this.loading1 = false;
            this.tableData = res.object;
            this.pageTotal1 = res.totalNum;
          }
          if (this.type === 3) {
            this.loading2 = false;
            this.tableList = res.object;
            this.pageTotal2 = res.totalNum;
          }
        }
      },
      handleChangePage (page) {
        this.pageIndex = page;
        this.getList();
      },
      // 选择
      changeRadio (val) {
        this.currentIndex = val;
        this.getList()
      },
      // 远程搜索
      changeDevice (val) {
        let obj = this.deviceList.find(item => item.id === val);
        this.addForm.name = obj.name;
      },
      // 查询设备名称
      async getEcgList () {
        const { data: res } = await this.post(this.api.ECG.queryEcgList);
        if (res.code === '200') {
          this.deviceList = res.object;
        }
      }
    },
    created () {
      this.getList();
    },
    components: {
      'element-table': elementTable
    }
  }
</script>
<style scoped lang="scss">
  .add-btn {
    text-align: center;
  }
</style>